<template>
  <div class="content">
      <div>
          <van-nav-bar class="nav-bar-style" left-arrow @click-left="onClickLeft">
            <template #title>
              <div class="nav-bar-title-style">已扫条码</div>
            </template>
            <template #left>
              <van-icon size="30" name="arrow-left" color="#FFF" />
            </template>
          </van-nav-bar>
      </div>

      <!-- 列表 -->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            :offset="offset"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onRefresh"
          >
              <van-cell>
                  <div v-for="(item,index) in list" :key="index">
                      <van-swipe-cell>
                          <div class="ul">
                              <!-- <div class="one discom spb"> -->
                                  <!-- <div class="left discom">
                                      <span class="titleLet">物料名称:</span>
                                      <span class="titleRight">{{item.materialName}}</span>
                                  </div> -->
                                  <div class="right discom martop">
                                      <span class="titleLet">二维码:</span>
                                      <span class="titleRight">{{item}}</span>
                                  </div>
                              <!-- </div> -->
                              <!-- <div class="two discom spb"> -->
                                  <!-- <div class="left discom martop">
                                      <span class="titleLet">批号:</span>
                                      <span class="titleRight">{{item.batchNo}}</span>
                                  </div>
                                  <div class="right discom martop">
                                      <span class="titleLet">入库时间:</span>
                                      <span class="titleRight">{{$moment(item.inTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
                                  </div> -->
                              <!-- </div> -->
                          </div>
                          <template #right>
                              <van-button square text="删除" type="danger" class="delete-button" @click="del(item)"/>
                          </template>
                      </van-swipe-cell>
                  </div>
              </van-cell>
          </van-list>
      </van-pull-refresh>

      <!-- 暂无数据 -->
      <div v-if="list.length == 0" class="noDataCont">
          <div class="imgs">
              <img src="@/assets/img_no-data.png" alt="暂无数据">
          </div>
          <div class="noDataTitle">暂无数据</div>
      </div>
  </div>
</template>

<script>
  import http from "@/utils/request.js";
  import api from "@/utils/api";
  import router from "@/router";
  import { Dialog } from 'vant';
  import { Toast } from 'vant';
  export default{
    data(){
      return{
        list:[],
        refreshing:'',
        offset:0,
        loading: false,
        finished: false,
      }
    },
    created() {
      this.init()
    },
    methods:{
      onRefresh(){
        this.refreshing = true;
        this.finished = false;
        this.loading = true;
        this.init();
      },
      onClickLeft() {
        this.$router.push({
          path:'/outStorageDetail',
          query:{
            id: this.$route.query.id
          }
        });
      },
      init(){
        var param={
          outMaterialId: this.$route.query.outMaterialId,
        }
        http.fetchGet(api.LimsGetOutMaterieQRCode, param, "加载中...").then(response => {
            if(response.code === 1){
              this.list = response.data;
              this.finished = true;
              this.loading = false;
              this.refreshing = false;
            }
        }).catch(err => {
            console.log(" catch err  is  " + err);
        });
      },
      del(row){
        Dialog.confirm({
          title: '友情提示',
          message: '确定要删除吗？',
        }).then(() => {
            var data = {
              outMaterialId:this.$route.query.outMaterialId,
              qrCode:row
            }
            http.fetchGet(api.LimsDeleteOutStockDetail,data, "加载中...").then(response => {
                if(response.code === 1){
                  Toast.success('删除成功');
                  this.init()
                }
            }).catch(err => {
                console.log(" catch err  is  " + err);
            });
        }).catch(() => {
            // on cancel
        });

      }
    }
  }
</script>

<style scoped lang="scss">
  .nav-bar-style {
    background: #2E71FF;
    color: #fff;
  }
  .nav-bar-title-style {
    font-size: 22px;
    text-align: center;
    font-family: PingFangSC-Regular;
    color: #fff;
    margin-right: 62px;
  }
  .slot{
    width: 100%;
    height: 15px;
    background-color: #F6F6F6;
  }


  .ul{
    padding: 15px 8px;
    border-bottom: 1px solid #e2e2e2;
    font-size: 18px;
  }
  .discom{
    display: flex;
    align-items: center;
  }
  .spb{
    justify-content: space-between;
  }
  .titleLet{
    width: 20%;
    // min-width: 10%;
    text-align: left;
    color: #b3b3b3;
  }
  .titleRight{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 63%;
    text-align: left;
    margin-left: 20px;
  }
  // .left{
  //   width: 50%;
  // }
  // .right{
  //   width: 50%;
  // }
  .martop{
    margin-top: 10px;
  }
  .two{
    margin-top: 12px;
  }
  .delete-button{
    height: 100%;
  }
  /* 暂无数据 */
  .noDataTitle{
    color: #666666;
    font-size: 20px;
    margin-top: 10px;
  }
  .noDataCont{
    height: 274px;
    /* width: 100%; */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -137px;
    transform: translate(-50%);
  }
  img{
    width: 100%;
    height: 100%;
  }
  .van-cell{
    padding: 0;
  }
</style>
